<template>
  <div class="todo-container">
    <div class="todo-wrap">
      <Header />
      <List :todos="todos" />
      <Footer :todos="todos"  />
    </div>
  </div>
</template>

<script>
import Header from './components/Header/index.vue'
import Footer from './components/Footer/index.vue'
import List from './components/List/index.vue'

export default {
    name:'App',
    components:{
      Header,
      Footer,
      List
    },
    data(){
      return{
        todos:JSON.parse(localStorage.getItem("todos_key"))
      }
    },

    watch:{
      todos:{
        handler(val){
          localStorage.setItem("todos_key",JSON.stringify(val))
        },
            deep:true,
      }
    },

    mounted(){
      this.$bus.$on('addTodo',this.addTodos)
      this.$bus.$on('deleteTodo',this.deleteTodo)
      this.$bus.$on('checkTodo',this.checkTodo)
      this.$bus.$on('checkadd',this.checkadd)
      this.$bus.$on('deleteTodos',this.deleteTodos)
    },

    methods: {
      addTodos(title){
        const sec = {
          id:Date.now(),
          title,
          done:false
        }

        this.todos.unshift(sec)

      },
      deleteTodo(index){
        this.todos.splice(index,1)
      },
      checkTodo({todo,isitem}){
        todo.done = isitem
      },
      checkadd(done){
       this.todos.forEach((todo)=>todo.done = done)
      },
      deleteTodos(){
       this.todos =  this.todos.filter((todo)=>!todo.done)
      }
    }
}
</script>

<style scoped>
/*app*/
.todo-container {
  width: 600px;
  margin: 0 auto;
}
.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
</style>